<template>
	<view class="">
		<view class="" style="height: 10rpx;">
			<uni-search-bar :radius="40" @confirm="search"></uni-search-bar>
		</view>
		<view class="content">
			<view class="inv-h-w">
				<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">装修</view>
				<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">设计师</view>					
			</view>
			<!-- 页面一 -->
			<view class="" v-show="Inv == 0">
			<view class="">
				<view class="bg-img">
					<image src="../../static/kan.png" mode="" style="width: 200rpx; height: 120rpx;"></image>
				</view>
				<view class="bg-img">
					<image src="../../static/tu.png" mode="" style="width: 200rpx; height: 120rpx;"></image>
				</view>
				<view class="bg-img">
					<image src="../../static/zhuangxiu.png" mode="" style="width: 200rpx; height: 120rpx;"></image>
				</view>
			</view>
			<view class="">
				<uni-card title="你家是哪种房" thumbnail="">
				    <view class="" style="width: 100%; height: 200rpx; border: 1rpx white solid;">
				    	<view class="" style="width: 33.3%; height: 200rpx; border: 1rpx white solid; float: left;">
				    		<view class="" style="text-align: center;">
				    			<image src="../../static/huxin.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
				    		</view>
							<view class="" style="text-align: center;">
								<text style="font-size: 40rpx;">户型</text>
							</view>
				    	</view>
						<view class="" style="width: 33.3%; height: 200rpx; border: 1rpx white solid; float: left;">
							<view class="" style="text-align: center;">
								<image src="../../static/gaizao.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
							</view>
							<view class="" style="text-align: center;">
								<text style="font-size: 40rpx;">老房改造</text>
							</view>
						</view>
						<view class="" style="width: 30%; height: 200rpx; border: 1rpx white solid; float: left;">
							<view class="" style="text-align: center;">
								<image src="../../static/jingzhuang.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
							</view>
							<view class="" style="text-align: center;">
								<text style="font-size: 40rpx;">精装房</text>
							</view>
						</view>
				    </view>
				</uni-card>
			</view>
			<view class="">
				<uni-card title="你是哪种类型" thumbnail="">
				    <view class="" style="width: 100%; height: 200rpx; border: 1rpx white solid;">
				    	<view class="" style="width: 33.3%; height: 200rpx; border: 1rpx white solid; float: left;">
				    		<view class="" style="text-align: center;">
				    			<image src="../../static/huxin.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
				    		</view>
							<view class="" style="text-align: center;">
								<text style="font-size: 40rpx;">户型</text>
							</view>
				    	</view>
						<view class="" @click="quote" style="width: 33.3%; height: 200rpx; border: 1rpx white solid; float: left;">
							<view class="" style="text-align: center;">
								<image src="../../static/gaizao.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
							</view>
							<view class="" style="text-align: center;">
								<text style="font-size: 40rpx;">装修报价</text>
							</view>
						</view>
						<view class="" style="width: 30%; height: 200rpx; border: 1rpx white solid; float: left;">
							<view class="" style="text-align: center;">
								<image src="../../static/jingzhuang.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
							</view>
							<view class="" style="text-align: center;">
								<text style="font-size: 40rpx;">精装房</text>
							</view>
						</view>
				    </view>
				</uni-card>
			</view>
			<view class="">
				<uni-card title="你想装这3种风格" thumbnail="">
				    <view class="" style="width: 100%; height: 200rpx; border: 1rpx white solid;">
				    	<view class="" style="width: 33.3%; height: 200rpx; border: 1rpx white solid; float: left;">
				    		<view class="" style="text-align: center;">
				    			<image src="../../static/huxin.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
				    		</view>
							<view class="" style="text-align: center;">
								<text style="font-size: 40rpx;">户型</text>
							</view>
				    	</view>
						<view class="" style="width: 33.3%; height: 200rpx; border: 1rpx white solid; float: left;">
							<view class="" style="text-align: center;">
								<image src="../../static/gaizao.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
							</view>
							<view class="" style="text-align: center;">
								<text style="font-size: 40rpx;">老房改造</text>
							</view>
						</view>
						<view class="" style="width: 30%; height: 200rpx; border: 1rpx white solid; float: left;">
							<view class="" style="text-align: center;">
								<image src="../../static/jingzhuang.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
							</view>
							<view class="" style="text-align: center;">
								<text style="font-size: 40rpx;">精装房</text>
							</view>
						</view>
				    </view>
				</uni-card>
			</view>
			</view>
			<!-- 页面二 -->
			<view class="" v-show="Inv == 1" >
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item" v-for="(item,key) in tupian" :key="key">
							<image :src="item.images" mode="" style="width: 100%;"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="imageContent">
					<view v-for="(content,key) in card1" :key="key" @click="goOut(key)">
						<view>
							<image :src="content.images" mode="" style="width: 50rpx;height: 50rpx;" ></image>
						</view>
						<view>{{content.functions}}</view>
					</view>
				</view>
				<view class="imageContent">
					<view v-for="(content,key) in card2" :key="key" @click="goPut(key)">
						<view>
							<image :src="content.images" mode="" style="width: 50rpx;height: 50rpx;" ></image>
						</view>
						<view >{{content.functions}}</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>
<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	
	import uniCard from '@/components/uni-card/uni-card.vue'
	
	export default {
		components: {
			uniSearchBar,
			uniCard
		},
		data() {
			return {
				tupian:[
					{
						"images":"../../static/1.jpg"
					},
					{
						"images":"../../static/2.jpg"
					},
					{
						"images":"../../static/3.jpg"
					}
				],
				Inv:0,
				card1:[
					{
						"images":"../../static/quanwu.png",
						"functions":"全屋记"
					},
					{
						"images":"../../static/wenzhang.png",
						"functions":"干活文章"
					},
					{
						"images":"../../static/libao.png",
						"functions":"免费众测"
					},
					{
						"images":"../../static/shejishi.png",
						"functions":"找设计师"
					}
					],
					card2:[
					{
						"images":"../../static/zhuanti.png",
						"functions":"装修记"
					},
					{
						"images":"../../static/huati.png",
						"functions":"话题活动"
					},
					{
						"images":"../../static/cepin.png",
						"functions":"测评报告"
					},
					{
						"images":"../../static/renzhen.png",
						"functions":"认证品牌"
					}
				]
			}
		},
		methods: {
			changeTab(Inv){
			    that.navIdx = Inv;  
			},
			quote:function(){
				uni.navigateTo({
					url:'../quote/quote'
				})
			},
			goOut:function(e){
				var that = this;
				console.log(e);
				if(e==3){
					that.designerFunction();
					console.log("lalala");
				}
			},
			designerFunction(){
				uni.navigateTo({
					url:"/pages/designerlist/designerlist"
				})
			},
		}
	}
</script>

<style>
	.content{
		width: 100%;
		margin: 100rpx 0rpx;
	}
	.bg-img{
		float: left;
		margin: 35rpx 25rpx;
	}
	.inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
	.inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
	.inv-h-se{color: #FF9014;border-bottom: 4upx solid #FF9014;}
	page{background-color: #F2F2F2;}
	.imageContent{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
	}
</style>
